<!DOCTYPE html>
<html>
    <head>
        <title>Event Bubbling and Multiple Listeners</title>
    </head>
    <body>
        <p>There are four lists listening to the mousedown event.</p>
        <ul>
            <li>The first list demonstrates standard event bubbling and multiple listeners.</li>
            <li>The second list demonstrates stopPropagation()</li>
            <li>The third list demonstrates stopImmediatePropagation()</li>
            <li>The fourth list removes the second listener from within the first listener.</li>
        </ul>
        <p>For the test to pass, it must match the reference.</p>
        <p>Only the first click counts. (I didn't want to figure out stopping multiple clicks)</p>

        <h2>List One:</h2>
        <h3>Result:</h3>
        <div class="listener1">
            <p></p>
            <div class="listener1">
                <p></p>
                <p class="listener1" style="cursor: pointer;">
                    Click me!
                </p>
            </div>
        </div>
        <h3>Reference:</h3>
        <div>
            <p>3 (PASS)</p>
            <p>2 (PASS)</p>
            <p>1 (PASS)</p>
        </div>

        <h2>List Two:</h2>
        <h3>Result:</h3>
        <div class="listener2">
            <p></p>
            <div class="listener2">
                <p></p>
                <p class="listener2" style="cursor: pointer;">
                    Click me!
                </p>
            </div>
        </div>
        <h3>Reference:</h3>
        <div>
            <p>2 (PASS)</p>
            <p>1 (PASS)</p>
        </div>

        <h2>List Three:</h2>
        <p>(Test fails if FAIL is shown on screen)</p>
        <h3>Result:</h3>
        <div class="listener3">
            <p></p>
            <div class="listener3">
                <p></p>
                <p class="listener3" style="cursor: pointer;">
                    Click me!
                </p>
            </div>
        </div>
        <h3>Reference:</h3>
        <div>
            <p>1 (PASS)</p>
        </div>

        <h2>List Four:</h2>
        <p>(Test fails if FAIL is shown on screen)</p>
        <h3>Result:</h3>
        <div class="listener4">
            <p></p>
            <div class="listener4">
                <p></p>
                <p class="listener4" style="cursor: pointer;">
                    Click me!
                </p>
            </div>
        </div>
        <h3>Reference:</h3>
        <div>
            <p>3 (PASS)</p>
            <p>2 (PASS)</p>
            <p>1 (PASS)</p>
        </div>

        <script>
            let first_listener_count = 1;
            let second_listener_count = 1;
            let third_listener_count = 1;
            let fourth_listener_count = 1;

            function get_p_element_from_event(event) {
                let result_p_element = event.currentTarget.firstElementChild;

                if (!result_p_element) {
                    result_p_element = event.currentTarget;
                }

                return result_p_element;
            }

            function first_listener(event) {
                let result_p_element = get_p_element_from_event(event);

                result_p_element.innerText = first_listener_count;
                first_listener_count++;
            }

            function second_listener(event) {
                let result_p_element = get_p_element_from_event(event);

                result_p_element.innerText = second_listener_count;
                second_listener_count++;

                if (second_listener_count == 3) {
                    event.stopPropagation();
                    second_listener_count = 1;
                }
            }

            function third_listener(event) {
                let result_p_element = get_p_element_from_event(event);

                result_p_element.innerText = third_listener_count;

                if (third_listener_count > 1) {
                    result_p_element.innerText += " (FAIL)";
                } else {
                    result_p_element.innerText += " (PASS)";
                }

                third_listener_count++;
                event.stopImmediatePropagation();
            }

            function fourth_listener(event) {
                let result_p_element = get_p_element_from_event(event);

                result_p_element.innerText = fourth_listener_count + " (PASS)";
                fourth_listener_count++;

                if (result_p_element.className == "listener4")
                    result_p_element.removeEventListener("mousedown", listener_fail);
                else
                    result_p_element.parentNode.removeEventListener("mousedown", listener_fail);
            }

            function listener_pass(event) {
                let result_p_element = get_p_element_from_event(event);
                result_p_element.innerText += " (PASS)";
            }

            function listener_fail(event) {
                let result_p_element = get_p_element_from_event(event);
                result_p_element.innerText += " (FAIL)";
            }

            const first_listeners = document.querySelectorAll(".listener1");
            const second_listeners = document.querySelectorAll(".listener2");
            const third_listeners = document.querySelectorAll(".listener3");
            const fourth_listeners = document.querySelectorAll(".listener4");

            for (const element of first_listeners) {
                element.addEventListener("mousedown", first_listener);
                element.addEventListener("mousedown", listener_pass);
            }

            for (const element of second_listeners) {
                element.addEventListener("mousedown", second_listener);
                element.addEventListener("mousedown", listener_pass);
            }

            for (const element of third_listeners) {
                element.addEventListener("mousedown", third_listener);
                element.addEventListener("mousedown", listener_fail);
            }

            for (const element of fourth_listeners) {
                element.addEventListener("mousedown", fourth_listener);
                element.addEventListener("mousedown", listener_fail);
            }
        </script>
    </body>
</html>
